<!DOCTYPE html>
<meta charset="utf-8">
<title>Streamgraph</title>
<style>
button {
  /*position: absolute;
  left: 10px;
  top: 10px;*/
	margin: auto;
}
.test{
	width: 100px;
	height: 100px;
	background-color: saddlebrown;
	margin-bottom: 20px;
}
.test<button{
	margin-left: 10px;
}
svg{
	/*position: absolute;
	top: 0;*/
		margin: auto;
}

</style>
<button onclick="transition()">Update</button>
<div class="test"><button>2222</button></div>
<div class="test" id="test"></div>
<div class="test"></div>
<p>p</p>
<p>p</p>
<script type="text/javascript">
//	var btn=document.selectAll(".test");
//	alert(btn);
</script>
<div><svg width="960" height="500"></svg></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!--<script src="../js/chart.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
	d3.selectAll("div").style("border","1px solid red");//d3.js  让代码不再冗余
	var test=document.getElementsByClassName("test");
	test.item(1).style.setProperty("border","2px solid blue");
//	d3.select("body").transition().style("background-color",function(d){
//		return "black";
//	})
//	d3.selectAll("div").data([4,8,15,16,23,42]).append("p").text(function(d,i){return "number is "+i+" !";});//d参数表示data每一个元素 i表示当前元素的下标
	var p = d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
    .text(function(d) { return d; });
    p.enter().append("div")//接着上面后面的没显示完的data继续显示
    .text(function(d) { return d; });
    p.exit().remove();//exit表示选定元素中 data不包括的元素，enter表示data中没有显示完的元素
    d3.select("#test").data([2,1,2,3,4,5]).append("div")//enter().append()第一个data参数不会显示　　直接append只会显示第一个参数
    .text(function(d) { return d; });
</script>